<template>
  <view class="content">
    <u-navbar title="注册">
    </u-navbar>
    <view class="header">
      <image src="/static/logo.png"></image>
    </view>

    <u-form class="list" :model="user" ref="uForm">
<!--      <u-form-item prop="userType">-->
<!--        <view class="list-call">-->
<!--          <u-select v-model="show" :list="userTypes" @confirm="selectUserType"></u-select>-->
<!--          <image class="img" src="/static/images/public/login/1.png" @click="test"></image>-->
<!--          <u-input class="sl-input" v-model="userType" type="text" maxlength="11" placeholder="请选择用户类型" @click="show = true"/>-->
<!--        </view>-->
<!--      </u-form-item>-->
      <u-form-item prop="nickname">
        <view class="list-call">
          <image class="img" src="/static/images/public/login/1.png"></image>
          <u-input class="sl-input" v-model="user.nickname" type="text" placeholder="输入昵称"/>
        </view>
      </u-form-item>
      <u-form-item prop="username">
        <view class="list-call">
          <image class="img" src="/static/images/public/login/1.png"></image>
          <u-input class="sl-input" v-model="user.username" type="text" maxlength="11" placeholder="输入用户名/手机号"/>
        </view>
      </u-form-item>
      <u-form-item prop="password">
        <view class="list-call">
          <image class="img" src="/static/images/public/login/1.png"></image>
          <u-input class="sl-input" v-model="user.password" type="password" maxlength="32" placeholder="输入密码" password="true"/>
        </view>
      </u-form-item>
        <view class="button-login" hover-class="button-hover" @tap="register()">
          <text>注册</text>
        </view>
    </u-form>
    <view>
      <u-toast ref="uToast" />
    </view>
    <view class="agreenment">
      <navigator url="../login/login" open-type="navigate">已有账号去登录</navigator>
    </view>
  </view>
</template>

<script>
import {register} from "@/api/register.js"

export default {
  name: "register",
  data() {
    return {
      show: false,
      user: {
        username: "",
        password: "",
        userType: "",
        nickname: "",
        roleIds: [13]
      },
      rules: {
        userType: [
          {
            required: true,
            message: '请选择用户类型',
            trigger: ['blur', 'change']
          }
        ],
        username: [
          {
            required: true,
            message: '请输入用户名/手机号',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          }
        ]
      },
    }
  },
  methods:{
    register(){
      this.$refs.uForm.validate(valid=>{
        if(valid){
          this.user.nickname = this.user.username
          register.registerUser(this.user).then(res=>{
            console.log(res)
            if(res.data.msg==="添加成功"){
              this.$refs.uToast.show({
                title: '注册成功',
                type: 'success',
                url: 'pages/public/login/login'
              })
            }else{
              this.$refs.uToast.show({
                title: '注册失败，请联系管理员',
                type: 'error'
              })
            }
          })
        }
      })
    },
    selectUserType(e){
      this.userType = e[0].label
      this.user.userType=e[0].value.split('*')[0]
      this.user.roleIds = [e[0].value.split('*')[1]]
    },
    entitySelect(params) {
      uni.navigateTo({
        url: '/pages/components/EntitySelect?entity=' + encodeURIComponent(JSON.stringify(params)),
      })
    },
  },
  onShow() {
    this.enable = true
    let that = this
    uni.$on('updateData', function (data) {
      console.log(data)
      if (data.type === 'Supplier') {
        that.user.supplierId = data.object.eid
        that.user.supplierName = data.object.name
        that.$forceUpdate()
        return
      }
    })
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header {
  width: 161rpx;
  height: 161rpx;
  /*background: rgb(63, 120, 235);*/
  /*box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);*/
  /*border-radius: 50%;*/
  margin-top: 30rpx;
  margin-left: auto;
  margin-right: auto;
}

.header image {
  width: 161rpx;
  height: 161rpx;
  /*border-radius: 50%;*/
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 50rpx;
  padding-left: 70rpx;
  padding-right: 70rpx;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #333333;
  /*border-bottom: 0.5px solid #e2e2e2;*/
}

.list-call .img {
  width: 40rpx;
  height: 40rpx;
}

.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 32rpx;
  margin-left: 16rpx;
}

.button-login {
  color: #FFFFFF;
  font-size: 34rpx;
  width: 470rpx;
  height: 100rpx;
  background: linear-gradient(-90deg, rgb(27, 197, 229), rgba(188, 226, 158, 1));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
  border-radius: 50rpx;
  line-height: 100rpx;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100rpx;
}

.button-hover {
  background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.agreenment {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  margin-top: 80rpx;
  color: #319ff3;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
}

.agreenment text {
  font-size: 24rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
}
</style>
